<!--
 * @Author: jiangjinchi 1468922694@qq.com
 * @Date: 2024-01-18 09:54:17
 * @LastEditors: jiangjinchi 1468922694@qq.com
 * @LastEditTime: 2025-10-27 15:08:08
 * @FilePath: \vue-admin-template\src\views\dashboard\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="normal-container" v-if="totalConfig">
        <div class="buttonMain">
            <div @click="clickDay(index)" :class="checkIndex == index ? 'buttonBoxYes' : 'buttonBox'"
                v-for="(item, index) in list" :key="index">
                {{ item }}

            </div>
            <el-date-picker @change="changeTime" value-format="yyyy-MM-dd" v-if="list[checkIndex] == '自定义'"
                :clearable="false" v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
        </div>

        <div style="display: flex;margin-top: 20px;">
            <div style="background-color: #fff;padding: 20px;width: calc(50% - 20px);margin-right: 20px;">
                <div style="display: flex;justify-content: space-between;align-items: center;">
                    <div class="title">
                        目标跟盯-各股东单位达成情况
                    </div>
                    <div style="background-color: #F5F5F5;border-radius:20px;display: flex;padding: 5px 10px">
                        <div @click="clickBase(index)" v-for="(item, index) in baseList"
                            :class="baseIndex == index ? 'baseBoxYes' : 'baseBox'">
                            {{ item }}
                        </div>
                    </div>
                </div>
                <div style="margin-top: 15px;">
                    <el-table :header-cell-style="{
                        'text-align': 'center',
                        background: '#F6F7FB',
                        color: '#4B4B4B',
                        fontSize: '13px',
                    }" :cell-style="{ 'text-align': 'center' }" :data="totalConfig['目标跟盯-各股东单位达成情况']"
                        style="width: 100%">
                        <el-table-column prop="shareholderUnit" label="股东名称"></el-table-column>
                        <el-table-column prop="target" label="目标"></el-table-column>
                        <el-table-column prop="value" label="已达成"></el-table-column>
                        <el-table-column prop="finishingRate" label="达成率"></el-table-column>
                        <el-table-column prop="expectedAchievementRate" label="本月预计达成率"></el-table-column>

                    </el-table>
                </div>
            </div>
            <div style="background-color: #fff;padding: 20px;width: calc(50%);">
                <div class="title">
                    数据总览
                </div>
                <div style="display: flex;margin-top: 15px;padding: 20px 0px;align-items: center;">
                    <div style="flex: 1;text-align: center;">
                        <div style="font-size: 13px;">销售额</div>
                        <div style="margin: 8px 0px;font-size: 25px;color: #000;font-weight: 600;">{{
                            totalConfig['数据总览-销售额'].value }}</div>
                        <div style="font-size: 12px;"
                            :style="{ color: totalConfig['数据总览-销售额'].mom >= 0 ? '#30DFB4' : '#FF5959' }">
                            环比

                            {{ totalConfig['数据总览-销售额'].mom + '%' }}

                            <img v-if="totalConfig['数据总览-销售额'].mom >= 0" style="vertical-align: middle;margin-left: 5px;"
                                src="@/assets/icon/增长2.png" alt="">
                            <img v-else style="vertical-align: middle;margin-left: 5px;" src="@/assets/icon/下降2.png"
                                alt="">
                        </div>


                    </div>
                    <div style="flex: 1;">
                        <div id="echartsId" style="width:100%;height: 100px;"></div>
                        <div style="text-align: center;">
                            <img style="width: 80px;height: auto;margin-top: 5px;" src="@/assets/icon/连锁排名.png" alt="">
                        </div>
                    </div>
                    <div style="flex: 1;text-align: center;">
                        <div style="font-size: 13px;">毛利率</div>
                        <div style="margin: 8px 0px;font-size: 22px;color: #000;font-weight: 600;">{{
                            totalConfig['数据总览-毛利率'].value  }}</div>
                        <div style="font-size: 12px;"
                            :style="{ color: totalConfig['数据总览-毛利率'].mom >= 0 ? '#30DFB4' : '#FF5959' }">
                            环比

                            {{ totalConfig['数据总览-毛利率'].mom + '%' }}
                            <img v-if="totalConfig['数据总览-毛利率'].mom >= 0" style="vertical-align: middle;margin-left: 5px;"
                                src="@/assets/icon/增长2.png" alt="">
                            <img v-else style="vertical-align: middle;margin-left: 5px;" src="@/assets/icon/下降2.png"
                                alt="">
                        </div>


                    </div>
                    <div style="flex: 1;">
                        <div id="echartsId2" style="width:100%;height: 100px;"></div>
                        <div style="text-align: center;">
                            <img style="width: 80px;height: auto;margin-top: 5px;" src="@/assets/icon/连锁排名.png" alt="">
                        </div>
                    </div>

                </div>
                <div style="margin-top: 15px;">
                    <el-table :header-cell-style="{
                        'text-align': 'center',
                        background: '#F6F7FB',
                        color: '#4B4B4B',
                        fontSize: '13px',
                    }" :cell-style="{ 'text-align': 'center' }" :data="totalConfig['数据总览']" style="width: 100%"
                        height="250">

                        <el-table-column prop="name" label="指标"></el-table-column>
                        <el-table-column prop="lastDayAvg" label="上期日均"></el-table-column>
                        <el-table-column prop="currentDayAvg" label="本期日均"></el-table-column>
                        <el-table-column prop="sequentialGrowthRate" label="环比增长">
                            <template slot-scope="scope">
                                <div style="font-size: 12px;"
                                    :style="{ color: scope.row.flag ? '#30DFB4' : '#FF5959' }">
                                    <img v-if="scope.row.flag" style="vertical-align: middle;"
                                        src="@/assets/icon/增长2.png" alt="">
                                    <img v-if="!scope.row.flag" style="vertical-align: middle;"
                                        src="@/assets/icon/下降2.png" alt="">

                                    {{ scope.row.sequentialGrowthRate }}

                                </div>
                            </template>
                        </el-table-column>

                    </el-table>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
var echarts = require('echarts');
export default {
    data() {
        return {
            form: {
                isCustom: 0, //是否为自定义（0 否 最近几天 1 是）
                days: 1, //最近几天天数
                beginDate: "", //自定义开始时间
                endDate: "" //自定义结束时间
            },
            value1: [],
            totalConfig: {
                '目标跟盯-各股东单位达成情况': [],
                "数据总览": [],
                "数据总览-销售额": {

                },
                "数据总览-毛利率": {

                },
            },

            myChart: null,
            option: null,
            myChart2: null,
            option2: null,
            baseIndex: 0,
            baseList: ['销售额', '毛利额', '政策品', '会员'],
            tableData: [],
            checkIndex: 0,
            list: ['今天', '近7日', '近30日', '自定义'],
            iconList: [
                {
                    name: '销售额',
                    imgName: '销售数据1-销售额',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '元'
                },
                {
                    name: '毛利额',
                    imgName: '销售数据2-毛利额',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '元'

                },
                {
                    name: '毛利率',
                    imgName: '销售数据3-毛利率',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '%'

                },
                {
                    name: '来客数',
                    imgName: '销售数据4-来客数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '人'

                },
                {
                    name: '客单价',
                    imgName: '销售数据5-客单价',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '元'

                },
                {
                    name: '购件数',
                    imgName: '销售数据6-购件数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
                {
                    name: '客品次',
                    imgName: '销售数据7-客品次',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
                {
                    name: '品数量',
                    imgName: '销售数据8-品数量',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
                {
                    name: '毛利同比差额',
                    imgName: '销售数据9-毛利同比差额',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
                {
                    name: '毛利环比差额',
                    imgName: '销售数据10-毛利环比差额',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
            ]
        }
    },
    mounted() {
        // this.totalConfig = window.PLATFROM_CONFIG.targetTracking;
        this.$nextTick(res => {
            this.getData()


        })
    },
    methods: {
        clickBase(index) {
            this.baseIndex = index;
            this.getData();
        },
        getToday() {
            var getTime = new Date().getTime(); //获取到当前时间戳
            var time = new Date(getTime); //创建一个日期对象
            var year = time.getFullYear(); // 年
            var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
            var date = time.getDate().toString().padStart(2, '0'); // 日
            var hour = time.getHours().toString().padStart(2, '0'); // 时
            var minute = time.getMinutes().toString().padStart(2, '0'); // 分
            var second = time.getSeconds().toString().padStart(2, '0'); // 秒

            this.$set(this.form, 'beginDate', year + "-" + month + "-" + date)
            this.$set(this.form, 'endDate', year + "-" + month + "-" + date)
            this.value1 = [year + "-" + month + "-" + date, year + "-" + month + "-" + date]


            this.getData();

        },
        getData() {
            let params = {
                isCustom: this.form.isCustom, //是否为自定义（0 否 最近几天 1 是）
                days: this.form.days, //最近几天天数
                beginDate: this.form.beginDate, //自定义开始时间
                endDate: this.form.endDate, //自定义结束时间
                type: this.baseIndex //类型（0 销售额 1 毛利额 2 政策品 3 会员）
            }
            this.$baseRequest('/target/follow/shareholderUnitAchievementStatus', params, {}, 'post').then(res => {
                this.totalConfig['目标跟盯-各股东单位达成情况'] = res.data;
            })
            this.$baseRequest('/target/follow/dataOverview', params, {}, 'post').then(res => {
                this.totalConfig['数据总览'] = res.data;
            })
           
            this.$baseRequest('/target/follow/targetData', this.form, {}, 'post').then(res => {
                if (res.data.salesVolume.mom) {

                    res.data.salesVolume.mom = res.data.salesVolume.mom.split("%").join("")

                }
                if (res.data.grossProfit.mom) {

                    res.data.grossProfit.mom = res.data.grossProfit.mom.split("%").join("")


                }
                this.totalConfig['数据总览-销售额'] = res.data.salesVolume;

                this.totalConfig['数据总览-毛利率'] = res.data.grossProfit;
                this.getEcharts()

            })

        },
        changeTime(e) {
            if (e) {
                this.form = {
                    isCustom: 1, //是否为自定义（0 否 最近几天 1 是）
                    days: '', //最近几天天数
                    beginDate: e[0], //自定义开始时间
                    endDate: e[1] //自定义结束时间
                }
                this.getData();

            }
        },
        clickDay(index) {
            this.checkIndex = index;
            switch (index) {
                case 0:
                    this.form = {
                        isCustom: 0, //是否为自定义（0 否 最近几天 1 是）
                        days: 1, //最近几天天数
                        beginDate: "", //自定义开始时间
                        endDate: "" //自定义结束时间
                    }
                    this.getData();

                    break;

                case 1:
                    this.form = {
                        isCustom: 0, //是否为自定义（0 否 最近几天 1 是）
                        days: 7, //最近几天天数
                        beginDate: "", //自定义开始时间
                        endDate: "" //自定义结束时间
                    }
                    this.getData();

                    break;
                case 2:
                    this.form = {
                        isCustom: 0, //是否为自定义（0 否 最近几天 1 是）
                        days: 30, //最近几天天数
                        beginDate: "", //自定义开始时间
                        endDate: "" //自定义结束时间
                    }
                    this.getData();

                    break;
                case 3:
                    this.form = {
                        isCustom: 1, //是否为自定义（0 否 最近几天 1 是）
                        days: '', //最近几天天数
                        beginDate: "", //自定义开始时间
                        endDate: "" //自定义结束时间
                    }
                    this.getToday();
                    break;
            }
        },


        freshEchats() {
            this.myChart.resize();
        },
        getEcharts() {
            this.myChart = echarts.init(document.getElementById('echartsId'));
            this.myChart2 = echarts.init(document.getElementById('echartsId2'));

            this.option = {
                color: ['#F86766', '#EBF2F8'],//修改图表颜色
                // 环形图中间默认显示文字
                title: [

                    {
                        // 成交金额文本
                        text: this.totalConfig['数据总览-销售额'].target,
                        left: "45%",
                        top: "42%",
                        textAlign: "center",
                        textVerticalAlign: "middle",
                        textStyle: {
                            fontSize: 20,
                            color: "#000",
                            lineHeight: 20,
                        },
                    },
                    {
                        // 成交金额文本
                        text: `累计完成率${this.totalConfig['数据总览-销售额'].finishingRate}%`,
                        left: "46%",
                        top: "62%",
                        textAlign: "center",
                        textVerticalAlign: "middle",
                        textStyle: {
                            fontSize: 10,
                            color: "#bdbdbd",
                            lineHeight: 20,
                        },
                    },

                ],
                legend: {
                    show: false,
                    orient: "horizontal",
                    left: "center",
                    width: '50%',
                    bottom: "10%",
                    icon: "circle",
                    itemGap: 20, // 设置图例项之间的间距
                },
                series: [
                    {
                        hoverAnimation: false,
                        z: 1,
                        name: "环形图",
                        type: "pie",
                        radius: ["85%", "100%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        labelLine: {
                            show: false,
                        },
                        label: {
                            show: false
                        },
                        data: [
                            { value: this.totalConfig['数据总览-销售额'].finishingRate, name: "脱尾主纱" },
                            { value: 100 - this.totalConfig['数据总览-销售额'].finishingRate, name: "敬酒礼服" },

                        ],
                    }
                ],
            };
            this.option2 = {
                color: ['#4FD5D7', '#EBF2F8'],//修改图表颜色
                // 环形图中间默认显示文字
                title: [

                    {
                        // 成交金额文本
                        text: this.totalConfig['数据总览-毛利率'].target,
                        left: "45%",
                        top: "42%",
                        textAlign: "center",
                        textVerticalAlign: "middle",
                        textStyle: {
                            fontSize: 20,
                            color: "#000",
                            lineHeight: 20,
                        },
                    },
                    {
                        // 成交金额文本
                        text: `累计完成率${this.totalConfig['数据总览-毛利率'].finishingRate}%`,
                        left: "46%",
                        top: "62%",
                        textAlign: "center",
                        textVerticalAlign: "middle",
                        textStyle: {
                            fontSize: 10,
                            color: "#bdbdbd",
                            lineHeight: 20,
                        },
                    },

                ],
                legend: {
                    show: false,
                    orient: "horizontal",
                    left: "center",
                    width: '50%',
                    bottom: "10%",
                    icon: "circle",
                    itemGap: 20, // 设置图例项之间的间距
                },
                series: [
                    {
                        z: 1,
                        name: "环形图",
                        type: "pie",
                        radius: ["85%", "100%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        labelLine: {
                            show: false,
                        },
                        label: {
                            show: false
                        },
                        data: [
                            { value: this.totalConfig['数据总览-毛利率'].finishingRate, name: "脱尾主纱" },
                            { value: 100 - this.totalConfig['数据总览-毛利率'].finishingRate, name: "敬酒礼服" },

                        ],
                    }
                ],
            };
            this.option && this.myChart.setOption(this.option, true);
            this.option2 && this.myChart2.setOption(this.option2, true);

            window.addEventListener("resize", this.freshEchats);
        }


    }
}
</script>
<style></style>
<style lang="scss" scoped>
.baseBoxYes {
    background-color: #fff;
    color: #70DDDF;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 10px;
    cursor: pointer;
}

.baseBox {
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 10px;
    cursor: pointer;


}

.yunyingBox {
    display: flex;
    align-items: center;
    // flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
    padding-bottom: 10px;
}

.yunying {

    flex-shrink: 0;
    width: 120px;

    /* 禁止收缩 */
    // width: 100px;

    border: 1px solid #96E7E8;
    padding: 10px;
    border-radius: 5px;
    background-color: #F2FFFF;
}

.title {
    font-size: 22px;
    letter-spacing: 1px;
}

.buttonBox {
    width: 95px;
    padding: 8px 0px;
    text-align: center;
    border: 1px solid #F3F4F5;
    color: #535353;
    font-size: 15px;
    cursor: pointer;

}

.buttonBoxYes {
    cursor: pointer;

    width: 95px;
    color: #70DDDF;
    font-size: 15px;
    background-color: #E6FFFF;

    padding: 8px 0px;
    text-align: center;
    border: 1px solid #96E7E8;
}

.buttonMain :first-child {
    border-radius: 7px 0px 0px 7px;
}

.buttonMain :last-child {
    border-radius: 0px 7px 7px 0px;
}

.buttonMain {
    background-color: #fff;
    padding: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
}
</style>
